<template xmlns:el-col="http://www.w3.org/1999/html">
    <div>
        <el-breadcrumb >
            <el-breadcrumb-item><i class="el-icon-document"></i> 订单信息</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="box-card">

            <el-row>

                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" size="mini" icon="el-icon-plus" @click="openAdd">添加</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-download" @click="download">下载</el-button>
                    </div>
                </el-col>

                <el-col :span="3" :push=6>
                    <template>
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker style="width: 152px"
                                    v-model="query.cdate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="选择日期"
                            >
                            </el-date-picker>
                        </div>
                    </template>
                </el-col>
                <el-col :span="3" :push=6>
                    <el-input
                            placeholder="柜号"
                            v-model="query.container"
                            clearable>
                    </el-input>
                </el-col>

                <el-col :span="3" :push=6>
                    <el-input
                            placeholder="花号"
                            v-model="query.flowerNo"
                            clearable>
                    </el-input>
                </el-col>

                <el-col :span="3" :push=6>

                    <el-select v-model="query.isfinish" clearable placeholder="全部" style="width: 100px">

                        <el-option label="已完成" value="1"></el-option>
                        <el-option label="未完成" value="0"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2" :push=6>
                    <el-button type="primary" @click="getOrders" icon="el-icon-search">搜索</el-button>
                </el-col>
            </el-row>

            <el-table :border="true"
                      :data="orders"
                      style="width: 100%">
                <el-table-column
                        type="index"
                        width="40"></el-table-column>
                <el-table-column
                        width="84"
                        prop="cdate"
                        label="日期"
                ></el-table-column>
                <el-table-column
                        width="71"
                        prop="container"
                        label="柜号"
                ></el-table-column>
                <el-table-column
                        width="71"
                        prop="flowerNo"
                        label="花号"
                >
                </el-table-column><el-table-column
                    width="71"
                    prop="cnumber"
                    label="坯布米数"
            > </el-table-column><el-table-column
                    width="85"
                    prop="cname"
                    label="客户"
            ></el-table-column> <el-table-column
                    width="71"
                    prop="codePort"
                    label="码口"
            ></el-table-column> <el-table-column
                    width="71"
                    prop="productWidth"
                    label="幅宽"
            > </el-table-column><el-table-column
                    width="71"
                    prop="openScissors"
                    label="开剪码数"
            > </el-table-column><el-table-column
                    width="71"
                    prop="product"
                    label="成件码数"
            > </el-table-column><el-table-column
                    width="71"
                    prop="scname"
                    label="样品"
            > </el-table-column><el-table-column
                    width="71"
                    prop="clength"
                    label="样品数量"
            > </el-table-column><el-table-column
                    width="70"
                    prop="greyWeight"
                    label="坯布克重"
            >
            </el-table-column>
                <el-table-column
                        width="71"
                        prop="productWeight"
                        label="成品克重"
                >
                </el-table-column>
                <el-table-column
                        width="210"
                        fixed="right"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button @click="deleteRole(scope.row)"  type="danger" size="mini" >删除</el-button>
                        <el-button type="primary" size="mini" @click="editOpen(scope.row)">修改</el-button>
                        <el-button type="primary" size="mini"  @click="upload(scope.row)">附件</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[5, 10, 15, 30]"
                    :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <el-dialog :close-on-click-modal="false"
                   title="添加订单信息管理"

                   :visible.sync="addDialogVisible"
                   width="40%"
        >

            <el-form ref="order" :rules="rules" :model="order"  label-width="80px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="客户:">
                            <el-select v-model="order.customerId">
                                <el-option
                                        v-for="customer in customers"
                                        :key="customer.id"
                                        :label="customer.cname"
                                        :value="customer.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="柜号:" prop="container" >
                            <el-input   v-model="order.container"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10"> <el-form-item label="花号:" prop="flowerNo">
                        <el-input v-model="order.flowerNo"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="坯布米数:" prop="cnumber" label-width="82px">
                        <el-input v-model.number="order.cnumber"></el-input>
                    </el-form-item></el-col>

                    <el-col :span="10"><el-form-item label="码口:">
                        <el-select v-model="order.codePortId">
                            <el-option
                           v-for="port in ports"
                           :key="port.id"
                           :label="port.codePort"
                           :value="port.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="幅宽:">
                        <el-select v-model="order.prouctWidthId">
                            <el-option
                                    v-for="pw in productWidth"
                                    :key="pw.id"
                                    :label="pw.productWidth"
                                    :value="pw.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>

                    <el-col :span="10"><el-form-item label="开剪码数:">
                        <el-select v-model="order.openScissorsId">
                            <el-option
                                    v-for="open in openScissors"
                                    :key="open.id"
                                    :label="open.openScissors"
                                    :value="open.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="成件码数:">
                        <el-select v-model="order.productId">
                            <el-option
                                    v-for="prod in product"
                                    :key="prod.id"
                                    :label="prod.product"
                                    :value="prod.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="工艺要求:">
                        <el-select v-model="order.technologyId">
                            <el-option
                                    v-for="tec in technology"
                                    :key="tec.id"
                                    :label="tec.technology"
                                    :value="tec.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"> <el-form-item label="包装要求:">
                        <el-select v-model="order.packingId">
                            <el-option
                                    v-for="pack in packaging"
                                    :key="pack.id"
                                    :label="pack.packaging"
                                    :value="pack.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>

                    <el-col :span="10"><el-form-item label="样品:">
                        <el-select v-model="order.sampleId">
                            <el-option
                                    v-for="sim in simple"
                                    :key="sim.id"
                                    :label="sim.cname"
                                    :value="sim.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"> <el-form-item label="样品数量:" prop="csample"  label-width="82px">
                        <el-input v-model.number="order.csample"></el-input>
                    </el-form-item></el-col>

                    <el-col :span="10"> <el-form-item label="坯布克重:" prop="greyWeight"  label-width="82px">
                        <el-input v-model.number="order.greyWeight"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="10"> <el-form-item label="成品克重:" prop="productWeight"  label-width="82px">
                        <el-input v-model.number="order.productWeight"></el-input>
                    </el-form-item></el-col>

                    <el-col :span="20"><el-form-item label="唛头:" prop="shippingMark">
                        <el-input v-model="order.shippingMark"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="20"> <el-form-item label="边字:" prop="selvageMark">
                        <el-input v-model="order.selvageMark"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="20">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="order.remarks"></el-input>
                        </el-form-item>
                    </el-col></el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
 <el-button  @click="addDialogVisible = false">关闭</el-button>
                 <el-button  type="primary" @click="submitForm('order')">保存</el-button>
            </span>
        </el-dialog>
        <el-dialog :close-on-click-modal="false"
                   title="修改订单信息管理"
                   :visible.sync="editDialogVisible"
                   width="40%"
        >

            <el-form ref="order" :rules="rules" :model="order"  label-width="90px">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="客户:" >
                            <el-select clearable v-model="order.customerId" >
                                <el-option
                                        v-for="customer in customers"
                                        :key="customer.id"
                                        :label="customer.cname"
                                        :value="customer.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="柜号:" prop="container">
                            <el-input   v-model="order.container"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10"> <el-form-item label="花号:" prop="flowerNo">
                        <el-input v-model="order.flowerNo"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="坯布米数:" prop="cnumber">
                        <el-input v-model="order.cnumber"></el-input>
                    </el-form-item></el-col>

                    <el-col :span="10"><el-form-item label="码口:">
                        <el-select v-model="order.codePortId">
                            <el-option
                                    v-for="port in ports"
                                    :key="port.id"
                                    :label="port.codePort"
                                    :value="port.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="幅宽:">
                        <el-select v-model="order.prouctWidthId">
                            <el-option
                                    v-for="pw in productWidth"
                                    :key="pw.id"
                                    :label="pw.productWidth"
                                    :value="pw.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>

                    <el-col :span="10"><el-form-item label="开剪码数:">
                        <el-select v-model="order.openScissorsId">
                            <el-option
                                    v-for="open in openScissors"
                                    :key="open.id"
                                    :label="open.openScissors"
                                    :value="open.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="成件码数:">
                        <el-select v-model="order.productId">
                            <el-option
                                    v-for="prod in product"
                                    :key="prod.id"
                                    :label="prod.product"
                                    :value="prod.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"><el-form-item label="工艺要求:">
                        <el-select v-model="order.technologyId">
                            <el-option
                                    v-for="tec in technology"
                                    :key="tec.id"
                                    :label="tec.technology"
                                    :value="tec.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"> <el-form-item label="包装要求:">
                        <el-select v-model="order.packingId">
                            <el-option
                                    v-for="pack in packaging"
                                    :key="pack.id"
                                    :label="pack.packaging"
                                    :value="pack.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>

                    <el-col :span="10"><el-form-item label="样品:">
                        <el-select v-model="order.sampleId">
                            <el-option
                                    v-for="sim in simple"
                                    :key="sim.id"
                                    :label="sim.cname"
                                    :value="sim.id"
                            ></el-option>
                        </el-select>
                    </el-form-item></el-col>
                    <el-col :span="10"> <el-form-item label="样品数量:" prop="csample">
                        <el-input v-model="order.csample"></el-input>
                    </el-form-item></el-col>

                    <el-col :span="10"> <el-form-item label="坯布克重:" prop="greyWeight">
                        <el-input v-model="order.greyWeight"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="10"> <el-form-item label="成品克重:" prop="productWeight">
                        <el-input v-model="order.productWeight"></el-input>
                    </el-form-item></el-col>

                    <el-col :span="20"><el-form-item label="唛头:" prop="productWeight">
                        <el-input v-model="order.shippingMark" ></el-input>
                    </el-form-item></el-col>
                    <el-col :span="20"> <el-form-item label="边字:" prop="selvageMark">
                        <el-input v-model="order.selvageMark"></el-input>
                    </el-form-item></el-col>
                    <el-col :span="20">
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="order.remarks"></el-input>
                        </el-form-item>
                    </el-col></el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
 <el-button  @click="editDialogVisible = false">关闭</el-button>
                 <el-button  type="primary" @click="editForm('order')">修改</el-button>
            </span>
        </el-dialog>
<el-dialog :close-on-click-modal="false"
                   title="文件上传"
                   :visible.sync="uploadDialogVisible"
                   width="40%"
        >
            <el-form ref="form" v-model="uploadForm" label-width="80px" size="mini">
                <el-form-item label="说明">
                    <el-input v-model="uploadForm.summary"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-upload class="upload-demo"
                               :action="uploadUrl"
                               :before-upload="handleBeforeUpload"
                               :on-error="handleUploadError"
                               :before-remove="beforeRemove"
                               multiple
                               :limit="5"
                               :on-exceed="handleExceed"
                               :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
 <el-button  @click="uploadDialogVisible = false">关闭</el-button>
                 <el-button  type="primary" @click="addForm">上传</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {deleteData, getData, postData, putData} from "../api/index";
    import {export_json_to_excel} from "../order/Excel/export2Excel";
    import axios from 'axios'
    export default {
        name: "Order",
        mounted() {
            this.getSimple()
            this.getTechnology()
            this.getProductWidth()
            this.getProduct()
            this.getPackaging()
            this.getOpenScissors()
          this.getcustomer()
            this.getporyt()
            this.getOrders()
        },
        methods: {
async edit(){
    const res = await putData("/order/order/" + this.order.id, this.order)
    if(res.code === 20000){
        this.editDialogVisible = false
        this.$message.success(res.msg)
        await this.getOrders()
    }else {
        this.$message.error(res.msg)
    }
},
            async getSimple() {
                const res = await getData("/order/order/simple")
                if(res.code ===20000){
                    this.simple =res.data
                }
            },
            async  addForm(){
                const res = await postData("/extra/extra",this.uploadForm)
                if(res.code===20000){
                    this.uploadDialogVisible = false
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            },
            async getTechnology() {
                const res = await getData("/order/order/technology")
                if(res.code ===20000){
                    this.technology =res.data
                }
            },
            async getOpenScissors() {
                const res = await getData("/order/order/openScissors")
                if(res.code ===20000){
                    this.openScissors =res.data
                }
            },
            async getPackaging() {
                const res = await getData("/order/order/packaging")
                if(res.code ===20000){
                    this.packaging =res.data
                }
            },
            async getProductWidth() {
                const res = await getData("/order/order/productWidth")
                if(res.code ===20000){
                    this.productWidth =res.data
                }
            },
            async getProduct() {
                const res = await getData("/order/order/product")
                if(res.code ===20000){
                    this.product =res.data
                }
            },
            async getcustomer() {
                const res = await getData("/order/order/customer")
                if(res.code ===20000){
                    this.customers =res.data
                }
            },
            async getporyt() {
                const res = await getData("/order/order/port")
                if(res.code ===20000){
                    this.ports =res.data
                }
            },
            async download() {

                    const res = await getData('/order/order/export',this.query)

                    const list = res.data; //这里对应你页面表格的数据
                    require.ensure([], () => {

                              //这里必须使用绝对路径，使用@/+存放export2Excel的路径
                        const tHeader = ['订单日期', '柜号', '花号', '坯布米数', '客户', ' 码口', '幅宽', '开剪码数', '成件码数', '样品', '样品数量', '坯布克重', '成品克重'] // 导出的表头名信息
                        const filterVal = [
                            'cdate',
                            'container',
                            'flowerNo',
                            'cnumber',
                            'cname',
                            'codePort',
                            'productWidth',
                            'openScissors',
                            'product',
                            'scname',
                            'csample',
                            'greyWeight',
                            'productWeight'
                        ]
                        const data = this.formatJson(filterVal, list)
                        export_json_to_excel(tHeader, data, '订单') // 导出的表格名称，根据需要自己命名
                    })
                },
                //格式转换，直接复制即可
                formatJson(filterVal, jsonData) {
                    return jsonData.map((v) => filterVal.map((j) => v[j]))
                },


           async add() {
                const res = await postData('/order/order', this.order)
                if(res.code===20000){
                    this.addDialogVisible = false
                    await this.getOrders()
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            },
            deleteRole(orderInfo){
                this.$confirm('您真的要删除此纪录吗?', '删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async  () => {
                    const res = await deleteData("/order/order/"+orderInfo.id)
                    if(res.code === 20000){
                        this.$message.success(res.msg)
                        await  this.getOrders()
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(() => {

                });
            },
           async editOpen(orderInfo){
               this.editDialogVisible=true
                const res = await getData('/order/order/orderById/'+orderInfo.id)
                if (res.code === 20000) {
                    this.order = res.data
                }

            },
            upload(orderInfo){
                this.uploadForm={orderId:orderInfo.id}
                this.uploadDialogVisible=true
            },
            openAdd() {
                this.order={}
                this.addDialogVisible = true
            },
            async getOrders() {
                const res = await getData('/order/order', this.query)
                if (res.code === 20000) {
                    this.orders = res.data.data
                    this.total = res.data.total
                }
            },

            handleSizeChange(val) {
                this.query.size =val
                this.getOrders()
            },
            handleCurrentChange(val) {
                this.query.page =val;
                this.getOrders()
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.add()
                    } else {
                        this.$alert('验证失败，请重新输入！', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'info',
                                    message: `action: ${ action }`
                                });
                            }
                        });
                        return false;
                    }
                });
            },

            editForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.edit()
                    } else {
                        this.$alert('验证失败，请重新输入！', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'info',
                                    message: `action: ${ action }`
                                });
                            }
                        });
                        return false;
                    }
                });
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handleUploadError(error, file) {
                console.log("文件上传出错："+error)
            },
            //测试上传文件(注意web的上下文)
            handleBeforeUpload(file){
                console.log("开始上传，上传的文件为："+file)
                let formData = new FormData();
                formData.append("multipartFiles", file);
                axios({
                    method: 'post',
                    url: 'extra/extra/upload',
                    data: formData,
                    headers: {'Content-Type': 'multipart/form-data' }
                }).then((res) => {
                    console.log("文件上传返回："+res)
                }).catch(error => {
                    console.log("文件上传异常:"+error)
                })
            }
        },
        data(){
            return{
                uploadUrl: 'extra/extra/upload',
                fileList: [],
                list:[],
                uploadDialogVisible:false,
                uploadForm:{
                    },
                simple:[],
                technology:[],
                productWidth:[],
                product:[],
                packaging:[],
                openScissors:[],
                customers:[],
                ports: [],
                addDialogVisible:false,
                editDialogVisible:false,
            orders:[],
            order:{

            },
                total: 0,
                query: {
                    cdate:'',
                    container:'',
                    flowerNo:'',
                    isfinish:'',
                    name: '',
                    page: 1,
                    size: 10
                },
                rules: {
                    container: [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                    ],
                    flowerNo: [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                    ],
                    csample: [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                        { type: 'number', message: '必须为数字类型', trigger: 'blur' }
                    ],
                    cnumber: [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                        { type: 'number', message: '必须为数字类型', trigger: 'blur' }
                    ],
                    greyWeight:  [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                        { type: 'number', message: '必须为数字类型', trigger: 'blur' }
                    ],
                    productWeight: [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                        { type: 'number', message: '必须为数字类型', trigger: 'blur' }
                    ],
                    shippingMark: [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                    ],

                    selvageMark: [
                        { required: true, message: '该项为必输项', trigger: 'blur' },
                    ],
                }
            }

        }
    }
</script>

<style scoped>

</style>